<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入CSS要有顺序  先引入第三方库, 再引入公共部分 ,再引入当前页面的 css文件-->
    <link rel="stylesheet" href="lib/reset/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <!--引入小米的字体-->
    <link rel="stylesheet" href="fonts/font.css">

    <link rel="stylesheet" href="fonts2/iconfont.css">

</head>
<body>

<span class="iconfont">&#xe6e7;</span>

<!--1.顶部导航-->
<!--最外层div-->
<div class="topnav">
    <!--版心-->
    <div class="container clearfix">
        <!--顶部导航左侧-->
            <div class="topnav-left">
                <!--一堆a i 标签-->
                <a href="">小米商城</a><i>|</i>
                <a href="">MIUI</a><i>|</i>
                <a href="">IoT</a><i>|</i>
                <a href="">云服务</a><i>|</i>
                <a href="">金融</a><i>|</i>
                <a href="">有品</a><i>|</i>
                <a href="">小爱开放平台</a><i>|</i>
                <a href="">企业团购</a><i>|</i>
                <a href="">资质证照</a><i>|</i>
                <a href="">协议规则</a><i>|</i>
                <a href="">下载app</a><i>|</i>
                <a href="">Select Location</a>


                <!--快捷键-->
                <!--(a+i)*12-->
                <!--(a+i{|})*12-->

            </div>
        <!--顶部导航右侧-->
            <div class="topnav-right">
                <!--一堆a i标签 -->
                <a href="">登录</a><i>|</i>
                <a href="">注册</a><i>|</i>
                <a href="">消息通知</a>
                <a href="" class="cart"><em class="iconfont-cart"></em> 购物车(0)</a>
            </div>
    </div>
</div>



<!--2.搜索导航-->
<!--最外层div-->
<div class="searchnav">
    <!--版心-->
    <div class="container clearfix">
        <!--左侧图片logo-->
        <a href="" class="searchnav-logo">
            <img src="img/mi-logo.png" alt="">
        </a>
        <!--中间的热搜列表-->
        <div class="search-tab">
            <a href="">小米手机</a>
            <a href="">Redmi 红米</a>
            <a href="">电视</a>
            <a href="">笔记本</a>
            <a href="">家电</a>
            <a href="">路由器</a>
            <a href="">智能硬件</a>
            <a href="">服务</a>
            <a href="">社区</a>
        </div>
        <!--右侧的搜索条-->
        <div class="searchnav-search">
            <input type="text">
            <button class="iconfont-search"></button>
            <!--输入框中的热词-->
            <div class="searchnav-search-keys">
                <span>小米9 Pro 5G</span>
                <span>Redmi Note 8</span>
            </div>
        </div>
    </div>
</div>



<!--3.轮播图 -->
<!--最外层-->
<div class="carousel">
    <!--版心-->
    <div class="container clearfix">
        <!--左侧列表-->
        <div class="carousel-left-list">

            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>
            <a href="">手机 电话卡 <i class="iconfont-arrow-right-big"></i></a>

        </div>
        <!--轮播图片-->
        <a class="carousel-img">
            <img src="upload/carousel1.webp" alt="">
        </a>
        <!--左右导航按钮-->
        <a href="" class="carousel-left-nav iconfont-arrow-left-thin"></a>
        <a href="" class="carousel-right-nav iconfont-arrow-right-thin"></a>
        <!--圆点导航-->
        <ol class="dotnav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>



<!--4.优惠商品-->
<!--最外层div-->
<div class="discount">
    <!--版心-->
    <div class="container clearfix">
        <!--优惠商品左侧-->
        <div class="discount-left">
            <!--一堆a标签  img+ span -->
            <a href=""><img src="img/discount_item_01.png" alt=""><span>小米秒杀</span></a>
            <a href=""><img src="img/discount_item_02.png" alt=""><span>企业团购</span></a>
            <a href=""><img src="img/discount_item_03.png" alt=""><span>F码通道</span></a>
            <a href=""><img src="img/discount_item_04.png" alt=""><span>米粉卡</span></a>
            <a href=""><img src="img/discount_item_05.png" alt=""><span>以旧换新</span></a>
            <a href=""><img src="img/discount_item_06.png" alt=""><span>话费充值</span></a>

        </div>

        <!--优惠商品右侧-->
        <div class="discount-right">
            <!--三个a标签  img -->
            <a href=""><img src="upload/discount_01.jpg" alt=""></a>
            <a href="" class="discount-right-mid"><img src="upload/discount_02.jpg" alt=""></a>
            <a href=""><img src="upload/discount_03.jpg" alt=""></a>
        </div>

    </div>
</div>


<!--5.小米闪购 -->
<div class="flash">
    <!--版心-->
    <div class="container clearfix">
        <!--闪购标题-->
        <div class="flash-title">
            <!--左侧小米闪购文字-->
            <h1>小米闪购</h1>
            <!--右侧导航-->
            <div class="flash-title-right">
                <a href="" class="falsh-title-a-left iconfont-arrow-left-big"></a>
                <a href="" class="falsh-title-a-right iconfont-arrow-right-big"></a>
            </div>
        </div>
        <!--闪购内容-->
        <div class="flash-content">
            <!--闪购内容左侧 -->
            <div class="flash-content-left">
                <h3>14:00 场</h3>
                <img src="img/flash.png" alt="">
                <p>距离结束还有</p>
                <span>01</span>
                <small>:</small>
                <span>36</span>
                <small>:</small>
                <span>15</span>
            </div>
            <!--闪购内容右侧-->
            <div class="flash-content-right">

                <a href="" class="flash-content-right-product">
                    <img src="upload/flash1.jpg" alt="">
                    <h3>米家电动螺丝刀weweqwdasdadasdasdasdadasdasdasdacas</h3>
                    <p>专利一体化无绳设计,轻松开工</p>
                    <span class="newprice"> 179元</span>
                    <span class="oldprice"> 199元</span>
                </a>

                <a href="" class="flash-content-right-product">
                    <img src="upload/flash1.jpg" alt="">
                    <h3>米家电动螺丝刀</h3>
                    <p>专利一体化无绳设计,轻松开工</p>
                    <span class="newprice"> 179元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="flash-content-right-product">
                    <img src="upload/flash1.jpg" alt="">
                    <h3>米家电动螺丝刀</h3>
                    <p>专利一体化无绳设计,轻松开工</p>
                    <span class="newprice"> 179元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="flash-content-right-product">
                    <img src="upload/flash1.jpg" alt="">
                    <h3>米家电动螺丝刀</h3>
                    <p>专利一体化无绳设计,轻松开工</p>
                    <span class="newprice"> 179元</span>
                    <span class="oldprice"> 199元</span>
                </a>
            </div>
        </div>
    </div>
</div>


<!--广告 1-->
<div class="ad1">
    <!--版心-->
    <div class="container clearfix">
        <a href="">
            <img src="upload/ad1.webp" alt="">
        </a>
    </div>
</div>


<!-- 手机 -->
<div class="phone">
    <!--版心-->
    <div class="container clearfix">
        <!--上边标题-->
        <div class="phone-title">
            <h1>手机</h1>
            <a href="">查看全部 <i class="iconfont-arrow-right-big"></i></a>
        </div>
        <!--下边内容-->
        <div class="phone-content">
            <!--左侧大图片子 -->
            <div class="phone-content-left">
                <a href="">
                    <img src="upload/phone-content-left.webp" alt="">
                </a>
            </div>
            <!--右侧手机内容-->
            <div class="phone-content-right">
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
                <a href="" class="phone-content-right-product">
                    <img src="upload/phone-content-show-product.webp" alt="">
                    <h3>小米10</h3>
                    <p>骁龙865/1亿像素相机</p>
                    <span class="newprice"> 3999元</span>
                    <span class="oldprice"> 199元</span>
                </a>
            </div>
        </div>
    </div>
</div>


<!--广告 1-->
<div class="ad1">
    <!--版心-->
    <div class="container clearfix">
        <a href="">
            <img src="upload/ad1.webp" alt="">
        </a>
    </div>
</div>


<!--家电部分 HTML 代码 -->
<div class="homeapp">
    <!--版心-->
    <div class="container clearfix">
        <!--标题-->
        <div class="homeapp-title">
            <h1>家电</h1>
            <div class="homeapp-title-right">
                <a href="">热门</a>
                <a href="">电视影音</a>
            </div>
        </div>
        <!--内容-->
        <div class="homeapp-content">
            <a href="" class="homeapp-content-product">
                <img src="upload/homeapp-content-img-1.webp" alt="">
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/homeapp-content-img-3.webp" alt="">
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
            <a href="" class="homeapp-content-product">
                <img src="upload/phone-content-show-product.webp" alt="">
                <h3>小米10</h3>
                <p>骁龙865/1亿像素相机</p>
                <span class="newprice"> 3999元</span>
                <span class="oldprice"> 199元</span>
            </a>
             
            <div class="homeapp-content-more">
                <a href="">
                    <div class="homeapp-content-more-text">
                        <p>
                            Air 13.3"2019款
                        </p>
                        <span>499元起</span>
                    </div>
                    <img src="upload/homeapp-content-img-4.webp" alt="">
                </a>
                <a href="">
                    <div class="homeapp-content-more-text">
                       <h3>
                           浏览更多
                       </h3>
                        <small>热门</small>
                    </div>
                    <i class="iconfont-circle-arrow-right"></i>
                </a>
            </div>

        </div>

    </div>
</div>
<!--广告 1-->
<div class="ad1">
    <!--版心-->
    <div class="container clearfix">
        <a href="">
            <img src="upload/ad1.webp" alt="">
        </a>
        
    </div>

    
</div>

<!--视频 -->
<div class="video">
    <div class="container clearfix">
        <!--标题-->
        <div class="video-title">
            <h1>视频</h1>
            <a href="">查看全部 <i class="iconfont-arrow-right-big"></i></a>
        </div>
        <!--内容-->
        <div class="video-content">
            <a href="" class="video-content-item">
                <img src="upload/video_content_movie.webp" alt="">
                <p>小米10 8K手机拍大片</p>
                <i class="iconfont-play video-content-play"></i>
            </a>
            <a href="" class="video-content-item">
                <img src="upload/video_content_movie.webp" alt="">
                <p>小米10 8K手机拍大片</p>
                <i class="iconfont-play video-content-play"></i>
            </a>
            <a href="" class="video-content-item">
                <img src="upload/video_content_movie.webp" alt="">
                <p>小米10 8K手机拍大片</p>
                <i class="iconfont-play video-content-play"></i>
            </a>
            <a href="" class="video-content-item">
                <img src="upload/video_content_movie.webp" alt="">
                <p>小米10 8K手机拍大片</p>
                <i class="iconfont-play video-content-play"></i>
            </a>
        </div>
    </div>
</div>

<!--售后 -->
<div class="after-sale">
    <div class="container">
        <div class="after-sale-main">
            <a href=""><i class="iconfont-tool"></i> 预约维修服务</a>
            <a href=""><i class="iconfont-circle-7"></i> 7天无理由退货</a>
            <a href=""><i class="iconfont-circle-15"></i> 15天免费换货</a>
            <a href=""><i class="iconfont-gift"></i> 满99元包邮</a>
            <a href=""><i class="iconfont-location"></i> 520余家售后网点</a>
        </div>
    </div>
</div>


<!--其他 -->
<div class="other">
    <div class="container clearfix">
        <div class="other-left">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">账户管理</a></dd>
            </dl>
        </div>
        <div class="other-right">
            <h1>400-100-5678</h1>
            <p>周一至周日 8:00-18:00 <br> (仅收市话费) </p>
            <a href=""><i class="iconfont-message2"></i>人工服务</a>
        </div>
    </div>
</div>


<!--底部-->
<div class="footer">
    <div class="container clearfix">

        <!--左侧a标签 -->
        <!--左侧图片logo-->
        <a href="" class="footer-logo">
            <img src="img/mi-logo.png" alt="">
        </a>

        <!--右侧的 一堆超链接-->
        <div class="footer-right">
            <div class="footer-alist">
                <!--一堆a i 标签-->
                <a href="">小米商城</a><i>|</i>
                <a href="">MIUI</a><i>|</i>
                <a href="">IoT</a><i>|</i>
                <a href="">云服务</a><i>|</i>
                <a href="">金融</a><i>|</i>
                <a href="">有品</a><i>|</i>
                <a href="">小爱开放平台</a><i>|</i>
                <a href="">企业团购</a><i>|</i>
                <a href="">资质证照</a><i>|</i>
                <a href="">协议规则</a><i>|</i>
                <a href="">下载app</a><i>|</i>
                <a href="">Select Location</a>
            </div>

            <div class="footer-copyright">
                <a href="">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 <br>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br>
                    增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12  食品经营许可证 <br>
                    违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 <br> </a>
            </div>
            <div class="footer-imgs clearfix">
                <a href=""><img src="img/truste.png" alt=""></a>
                <a href=""><img src="img/v-logo-2.png" alt=""></a>
                <a href=""><img src="img/v-logo-1.png" alt=""></a>
                <a href=""><img src="img/v-logo-4.png" alt=""></a>
            </div>
            <img src="img/slogan2016.png" class="footer-slogan" alt="">

        </div>
    </div>

</div>


</body>
</html>